<template>
  <div class="album-overview">
    <el-row>
      <el-col :span="15" class="left-side">
        <section>
          <div class="detail-top">
            <span class="top-icon tag-desc"><icon-svg name="iconEnroll"></icon-svg></span>描述
          </div>
          <div class="detail-content">
            {{ info.albumDesc }}
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-personal"><icon-svg name="iconPersonal"></icon-svg></span>个人备注
          </div>
          <div class="detail-content">
            <tag-addition :assetId="assetId"></tag-addition>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-album"><icon-svg name="iconAlbum"></icon-svg></span>专辑内容
          </div>
          <div class="detail-content album-content">
            <album-content-list :assetId="assetId" :permission="info.createUser.isMyself"></album-content-list>
          </div>
        </section>
      </el-col>
      <el-col :span="9" class="right-side">
        <section>
          <div class="detail-top">
            <span class="top-icon tag-base"><icon-svg name="iconBase"></icon-svg></span>基本信息
          </div>
          <div class="detail-content">
            <p>创建人：<tag-user :user="info.createUser"></tag-user></p>
            <p>创建时间：{{ info.albumCreateTm }}</p>
            <p>修改时间：{{ info.updateTm }}</p>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon"><icon-svg name="iconMessage"></icon-svg></span>评价信息
          </div>
          <div class="detail-content">
            <p>评价人次：{{ info.evaluation.userCnt }}次</p>
            <p>信息准确性：<el-rate v-model="info.evaluation.infoAcrc" disabled show-score></el-rate></p>
            <p>数据准确性：<el-rate v-model="info.evaluation.dataAcrc" disabled show-score></el-rate></p>
            <p>数据时效性：<el-rate v-model="info.evaluation.dataTmln" disabled show-score></el-rate></p>
          </div>
        </section>
        <section>
          <div class="detail-top">
            <span class="top-icon tag-user"><icon-svg name="iconCrown"></icon-svg></span>热门用户
          </div>
          <div class="detail-content">
            <template v-if="info.hotUser.length">
              <p v-for="(item, index) in info.hotUser" :key="item.userId">
                <tag-user :user="item" :index="index"></tag-user>
              </p>
            </template>
            <p v-else>暂无热门用户</p>
          </div>
        </section>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import tagAddition from '@/components/tag-addition'
import albumContentList from './album-content-list'
export default {
  components: {
    tagAddition,
    albumContentList
  },
  props: {
    assetId: {
      type: [String, Number],
      required: true,
      default: ''
    }
  },
  data() {
    return {
      info: {
        albumDesc: '',
        albumCreateTm: '',
        updateTm: '',
        cacIndvCmnts: [],
        evaluation: {
          userCnt: 0,
          infoAcrc: 0,
          dataAcrc: 0,
          dataTmln: 0
        },
        createUser: {},
        hotUser: []
      }
    }
  },
  methods: {
    getInfo(params) {
      this.info.albumDesc = params.albumDesc
      this.info.albumCreateTm = params.albumCreateTm
      this.info.updateTm = params.updateTm
      this.info.cacIndvCmnts = params.cacIndvCmnts
      this.info.evaluation.userCnt = params.assetAvgCmnt.userCnt
      this.info.evaluation.infoAcrc = params.assetAvgCmnt.infoAcrc
      this.info.evaluation.dataAcrc = params.assetAvgCmnt.dataAcrc
      this.info.evaluation.dataTmln = params.assetAvgCmnt.dataTmln
      this.info.createUser = params.createUser
      this.info.hotUser = params.hotUser
    }
  }
}
</script>

<style lang="scss">
.album-overview {
  .detail-content.album-content {
    margin-top: -40px;
    padding-top: 0;
  }
  .tag-album-content .tag-content-header {
    border-top: 0;
  }
  .detail-top {
    .tag-desc {
      background-color: #74cbc5;
    }
    .tag-album {
      background-color: #eab39a;
    }
    .tag-personal {
      background-color: #8893cb;
    }
  }
  .right-side .detail-top {
    .tag-base {
      svg {
        width: 18px;
        height: 18px;
      }
    }
    .tag-user svg {
      width: 28px;
      height: 28px;
    }
  }
}
</style>
